<template>
  <view class="root-lay">
    <view class="head-lay flex-h">
      <view class="head-title">{{ headTitle }}</view>
      <view class="operation-btns">
        <view class="del" @click="onDelClick">删除</view>
        <view class="rec" @click="renameConfirm">重命名</view>
      </view>
    </view>
    <view class="content-lay">
      <view class="title">検査結果(計画:2020/05)</view>
      <view class="info-line flex-h">
        <view class="info-item" style="width: 100%">
          <view class="info-title">開放分類：</view>
          <view class="info-value info-value-long">
            <picker
              @change="bindPickerChange"
              :value="pickerIndex"
              :range="pickerArray"
              range-key="name"
            >
              <view class="info-picker flex-h">
                <view style="width: 100%">{{
                  pickerArray[pickerIndex].name
                }}</view>
                <image
                  style="width: 9upx; height: 8upx"
                  src="@/static/imgs/icon_dropdown@2x.png"
                />
              </view>
            </picker>
          </view>
          <image
            class="icon-file"
            src="@/static/imgs/tools/icon_menu_bill@2x.png"
          />
        </view>
      </view>
      <view class="table-lay">
        <wyb-table
          class="data-table"
          ref="table"
          :headers="tableHeadData"
          :contents="tableContentData"
          :height="tableHeight"
          width="100%"
          :font-size="['15']"
          :min-height="['45']"
          :default-col-width="125"
          empty-string="///"
          check-col-width="50"
          enable-check="single"
          @onCheck="onTabSelect"
        />
      </view>
    </view>

    <view class="bottom-lay flex-h">
      <view class="btn" @click="onCancelClick">Cancel</view>
      <view
        class="btn"
        style="color: #1890ff; margin-left: 1upx"
        @click="onConfirmClick"
        >OK</view
      >
    </view>
    <!-- <hqs-popup
      title="弹窗标题"
      v-model="renameDialog"
      from="center"
      width="464upx"
      class="hqs-popup-rename"
    >
      <view class="info-item flex-v">
        <view class="info-title">限界值</view>
        <view class="info-value">2.00</view>
      </view>
      <view class="info-item">
        <view class="info-title">表面温度</view>
        <view class="info-value" style="background-color: #fff">23</view>
      </view>
    </hqs-popup> -->

    <!-- <uni-popup ref="popup" type="center" class="hqs-popup-rename"> -->
    <!-- <view class="hqs-popup-rename" :style="{'right':(windowWidth-465)+'px'}" v-if="renameDialog">
      <view class="content">
        
      </view>
      <view class="footer">
          <view class="cancel-btn">Cancel</view>
          <view class="confirm-btn">OK</view>
        </view>
    </view> -->
  </view>
</template>

<script>
import vTable from "@/components/no-bad-table/table.vue";
import selectData from "@/common/thick_show_data.js";
import uniPopup from "@/components/hqs-popup/uni-popup";
export default {
  components: {
    vTable,
    uniPopup,
  },
  data() {
    return {
      headTitle: "報告書一览",

      showType: 0, // 0:table  1:form

      headData: [],
      contentData: [],

      isOptEnable: false,
      selectTableItem: null,

      renameDefaultStr: "",

      pickerIndex: 0,
      pickerArray: [
        {
          name: "中国",
        },
        {
          name: "美国",
        },
        {
          name: "巴西",
        },
        {
          name: "日本",
        },
      ],

      checkDataList: [
        {
          title: "N侧",
          value: "333.00",
        },
        {
          title: "13-2",
          value: "333.00",
        },
      ],
      tableHeadData: [
        {
          id: "-1",
          label: "序号",
          width: 40,
          key: "m_index",
        },
        {
          id: "0",
          label: "書類表題",
          key: "m_id",
        },
        {
          id: "1",
          label: "ファイル名",
          key: "m_name",
          width: 312,
        },
      ],
      tableContentData: selectData.tableData,
      toolDataList: selectData.toolEntry,
      renameDialog: false,
      windowWidth:null,
      centerLocation:null
    };
  },

  watch: {
    selectTableItem(val) {
      if (this.selectTableItem == null) {
        this.isOptEnable = false;
      } else {
        this.isOptEnable = true;
      }
    },

    showType(val) {
      this.headTitle = val == 0 ? "野帳添付" : "検査結果記録";
    },
  },

  mounted() {
    const { windowWidth, windowHeight } = uni.getSystemInfoSync();	
    console.log(windowWidth)
    this.windowWidth = windowWidth
    this.headData = selectData.wildAccountTableData.headData;
    this.contentData = selectData.wildAccountTableData.contentData;
  },

  methods: {
    onSelectionChange(e) {
      if (e.new.item != null) this.selectTableItem = e.new.item;
      else this.selectTableItem = null;
    },

    onCancelClick() {
      this.$emit("closePopup");
    },

    onConfirmClick() {
      // if (this.selectTableItem == null) {
      //   uni.showToast({
      //     title: "请选择一条数据",
      //     icon: null,
      //   });
      //   return;
      // }

      // this.showType = 1;
      this.$emit("confirmFile");
    },

    onDelClick() {
      if (this.selectTableItem == null) {
        uni.showToast({
          title: "请选择一条数据",
          icon: null,
        });
      } else {
        this.removeTableItem(this.selectTableItem.id);
        this.selectTableItem = null;
      }
    },

  

    bindPickerChange(e) {
      console.log("picker发送选择改变，携带值为：" + e.detail.value);
      this.pickerIndex = e.detail.value;
    },

    removeTableItem(inId) {
      this.contentData.forEach((e) => {
        if (e.id == inId) {
          var i = this.contentData.indexOf(e);
          if (i >= 0) {
            this.contentData.splice(i, 1);
          }
        }
      });
    },
  
    renameConfirm() {
      // this.$refs.popup.open();
      // this.renameDialog = true;
      this.$emit("renameConfirm")
    },
  },
};
</script>

<style scoped lang="scss">
.root-lay {
}

.bottom-lay {
  width: 100%;
  position: fixed;
  bottom: 0upx;
  align-items: center;
  border-top: 1upx solid rgba(0, 0, 0, 0.1);
  background: #ffffff;
  // padding: 1upx;

  .btn {
    width: 50%;
    line-height: 34upx;
    background-color: #fff;
    // padding: 10upx;
    font-weight: 500;
    color: #000000;
    font-size: 13upx;
    text-align: center;
  }
  .btn:first-child {
    border-right: 1upx solid rgba(0, 0, 0, 0.1);
  }
}

.head-lay {
  position: fixed;
  top: 0;
  width: 100%;
  background: #ffffff;
  border-bottom: 1upx solid rgba(232, 232, 232, 1);
  z-index: 1000;
  height: 34upx;
  .head-title {
    line-height: 34upx;
    margin: 0 auto;
    font-size: 13upx;
    font-weight: 500;
    color: #333333;
  }
  .operation-btns {
    line-height: 34upx;
    position: absolute;
    right: 9upx;
    display: flex;

    view {
      font-size: 11upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 34upx;
    }
    .del {
      margin-right: 19upx;
    }
  }

  .head-right {
    position: absolute;
    right: 0;
    height: 100%;
    align-items: center;

    .head-tool {
      font-size: 18upx;
      color: #333333;
      margin-right: 10upx;
    }
  }
}

.content-lay {
  position: relative;
  top: 34upx;
  height: calc(100% - 68upx);
  overflow-y: auto;
  width: 100%;

  padding: 9upx;
  box-sizing: border-box;
}
.title {
  font-size: 11upx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}

.info-line {
  align-items: center;
  width: 100%;
  margin-top: 9upx;

  .info-item {
    display: flex;
    align-items: center;
  }

  .info-title {
    font-size: 11upx;
    color: #1f2329;
    width: 55upx;
  }
  .info-title-oth {
    font-size: 11upx;
    color: #1f2329;
    margin-left: 10upx;
  }

  .info-value {
    height: 25upx;
    // background: #fdfacc;
    border-radius: 1upx;
    border: 1px solid #cfd3d5;
    padding: 0 9upx;
    font-weight: 400;
    font-size: 11upx;
    box-sizing: border-box;
    line-height: 25upx;
  }
  .info-value-long {
    width: 356upx;
    // background: #f6f6f6;
    color: #999999;
  }

  .info-picker {
    align-items: center;
  }
  .icon-file {
    width: 25upx;
    height: 25upx;
    margin-left: 9upx;
  }

  .info-btn {
    background: #f6f6f6;
    border-radius: 2px;
    border: 1px solid #dee0e3;
    padding: 10upx;
  }
}
.table-lay {
  margin-top: 9upx;
}
.draw-area {
  padding: 10upx;
  border: 1px solid #cfd3d5;

  .draw-img {
    width: 100%;
    height: 30vh;
  }
}

</style>
